<template>
  <div id="main_tab">
    <el-tabs 
        v-model="activeName" 
        type="border-card" 
        closable
        @tab-remove="removeTab">
        <el-tab-pane
            v-for="item in tabs"
            :label="item.title"
            :key="item.title"
            :name="item.title">
            <component :is="item.componentName"></component>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import bus from './../busEvent';
export default {
    name: 'main-tab',
    data() {
      return {
        activeName: '',
        tabs: [], // {title: '',componentName: '', authority: ''},
      }
    },
    methods: {
      removeTab: function(name){
        //1.修改当前页
        if(this.activeName === name && this.tabs.length > 1){
          //获取当前页索引
          let activeIndex = 0;
          this.tabs.find((item,index,array)=>{
            if(item.title === this.activeName){
              activeIndex = index;
              return true;
            }
          })
          //修改当前显示页
          let nextShow = activeIndex - 1; // 默认显示前一个页面
          if(activeIndex === 0){
            nextShow = 1;  //如果删除的是第一个，index = 1;
          }
          this.activeName = this.tabs[nextShow].title;
        }
        //2.删除页
        this.tabs.find((item,index,array)=>{
          if(item.title === name){
            array.splice(index,1);
            return true;
          }
        })
      },
    },
    mounted(){
      let self = this;
      bus.$on('addTab',function(item){
        //item=>{title: '',componentName: '', authority: []},
        let isExist = false;
        //0.判断是否存在
        self.tabs.find(obj=>{
          if(obj.title === item.title){
            isExist = true;
            return true;
          }
        })
        //1. 不存在添加组件
        if(!isExist){
          self.tabs.push(item);
        }
        //2. 选中当前组件
        self.activeName = item.title; 
      })
    },
    components: {
      permission: () => import('./../views/user/Permission.vue'),
      roleManage: () => import('./../views/user/RoleManage.vue'),
      userManage: () => import('./../views/user/UserManage.vue'),
      personal: () => import('./../views/Personal.vue'),
      home: () => import('./../views/Home.vue'),
    }



    // created: function(){
    //   let tabHome = {
    //     title: '首页',
    //     icon: 'el-icon-house',
    //     viewName: 'home',
    //     path: '/home'
    //   }
    //   this.addTab(tabHome);
    // },
    /*methods: {
      addTab: function(tabMes){
        //tabMes: {title: **, icon: **, viewName: **, path: **}
        let flag = true;
        //判空
        if(this.isEmpty(tabMes))
          return;
        //判断是否已经存在
        this.tabs.forEach((item,index,array)=>{
          if(item.path == tabMes.path){
            flag = false; 
          }
        })
        if(!flag) return;
        //添加
        this.tabs.push(tabMes);
        this.tabIndex++;
        //修改当前页
        this.tabValue = tabMes.title;
        //页面跳转
        this.$router.push(tabMes.path);
        // this.jump(tabMes.path);
      },
      jump: function(tab){
        let index = parseInt(tab.index);
        let path = this.tabs[index].path;
        this.$router.push(path);
      },
      isEmpty: function(value) {
        return (
            value === undefined ||
            value === null ||
            (typeof value === 'Object' && Object.keys(value).length === 0) ||
            (typeof value === 'String' && value.trim().length === 0)
        );
      },
      
    }*/
}
</script>

<style lang="less">
#main_tab {
  .el-tabs--border-card>.el-tabs__content {
    padding: 0;
    // box-sizing: border-box;
  }

  .el-tabs--border-card>.el-tabs__header {
      background-color: #eee;
  }


  .el-tabs--border-card {
      box-shadow: none;
  }

  .el-tabs__content {
    box-sizing: border-box;
    height: calc(~"100vh - 45px - 41px - 45px");
    overflow-y: auto;
    overflow-x: hidden;
    // height: 500px;
  }
}

</style>
